<template>
  <div style="background: #f8f8f8; min-height: calc(100vh - 200px)">
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')">首页</a-breadcrumb-item>
        <a-breadcrumb-item href="" @click.native="$router.push('/employment/home')"> 创业就业 </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #FFBE37"> 公司介绍 </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="top">
      <div class="toLeft">
        <div class="cOicon-id" style="align-items: inherit">
          <div class="image123">
            <img :src="imageWebUrl + nommData.logo" @error="$event.target.src = GLOBAL.defaultIconImg" alt="" />
          </div>
          <div>
            <span class="x5TXt" style="width: 650px; margin-top: 12px">
              {{ nommData.name }}</span
            >

            <span
              class="titleTxt5"
              style="width: 650px; margin-top: 19px; color: #666666"
              >{{nommData.nature}}<span v-show="nommData.nature">｜</span>{{ nommData.trade }}<span v-show="nommData.trade && nommData.scale">｜</span>{{ nommData.scale }}
            </span>
          </div>
        </div>
        <div v-show="nommData.comDesc"><p style="margin-top: 17px" class="titleTxt5">公司介绍</p></div>
        <div style="width: 800px; margin-top: 10px">
          <p class="titleTxt5">
            {{ nommData.comDesc }}
          </p>
        </div>
      </div>
      <div class="toRight">
        <div style="display: flex; align-items: baseline; margin-top: 84px">
          <div class="yellowBar"></div>
          <span class="titleTxt1" style="font-size: 15px">公司地址</span>
        </div>
        <p
          class="titleTxt5"
          style="color: #666666; line-height: 21px; margin-top: 8px"
        >
          {{ nommData.address }}
        </p>
        <!-- <div class="image2">
          <img src="@/assets/image/mapData.png" alt="" />
        </div> -->
      </div>
    </div>
    <div class="conder">
      <!-- 选择区域 -->
      <div class="dlex1-div" style="margin-bottom: 19px">
        <div v-show="selbuer" class="yellowBar"></div>
        <span
          :class="{ lopsss: selbuer }"
          class="titleTxt1 selcolore"
          >在招岗位</span
        >
        <!-- <div v-show="!selbuer" class="yellowBar"></div>
        <span
          :class="{ lopsss: !selbuer }"
          class="titleTxt1 selcolore"
          @click="selLopsss(2)"
          >职业培训</span
        > -->
      </div>

      <div v-if="!selbuer" class="coRsingleCF wrapper">
        <div
          class="listDiv"
          @click="getJumptrainDetails(item.trainNo)"
          v-for="(item, list) in nommpost"
          :key="list"
        >
          <div class="image1">
            <img src="" alt="" />
            <!-- <span v-if="mosgolor == 1" class="stateLabel">未开始</span>
            <span v-if="mosgolor == 2" class="stateLabel">已结束</span>
            <span v-if="mosgolor == 3" class="stateLabel">进行中</span> -->
          </div>
          <div>
            <span class="titleTxt1" style="font-weight: 600; margin-top: 6px">
              {{ item.trainName }}
            </span>
            <div style="margin-top: 8px">
              <span class="squareLabel">一个标签</span>
              <span
                v-for="i in 2"
                :key="i"
                class="squareLabel"
                style="margin-left: 15px"
                >一个标签</span
              >
            </div>
            <span class="timeTxt1 lineSingle"
              >培训时间： {{ item.startTime }} - {{ item.endTime }}</span
            >
          </div>
        </div>
      </div>
      <!-- 职位展示区域 -->
      <div v-if="selbuer" class="wrapper">
        <ul class="workList">
          <li v-for="(item, inom) in nommtrain" :key="inom">
            <p
              class="workTitle"
              @click="
                $router.push(
                  '/employment/positionDetail?jobCode=' + item.jobCode
                )
              "
            >
              {{ item.name }}
            </p>
            <div class="msg">
              <div
                class="welfare"
                @click="
                  $router.push(
                    '/employment/positionDetail?jobCode=' + item.jobCode
                  )
                "
              >
                <div class="navs">
                  <p class="maney">
                    <template v-if="item.payType == 1">
                      {{ item.minPay }}<span v-show="item.minPay && item.maxPay">K-</span>{{ item.maxPay }}<span v-show="item.minPay && item.maxPay">K</span>/月
                    </template>
                    <template v-else-if="item.payType == 2">
                      {{ item.maxPay }}元/日
                    </template>
                    <template v-else-if="item.payType == 3"> 面议 </template>
                  </p>
                  <div class="nav">
                    <p>{{ item.degree }}</p>
                    <p class="line" v-show="item.degree">|</p>
                    <p>{{ item.workExper }}</p>
                    <p class="line" v-show="item.disaType && item.workExper">|</p>
                    <p>{{ item.disaType }}</p>
                  </div>
                </div>
                <div class="treatment" v-if="item.welfare">
                  <p v-for="(i,j) in item.welfare.split('、')" v-show="j<3" :key="i + 'h'">{{ i }}</p>
                </div>
              </div>
              <div style="flex: 1"></div>
              <div
                v-show="0"
                class="company"
                @click="
                  $router.push('/education/detailsBusiness?id=' + item.comCode)
                "
              >
                <img
                  :src="imageWebUrl + item.company"
                  @error="$event.target.src = GLOBAL.defaultIconImg"
                  alt=""
                  class="worklogo"
                />
                <div class="synopsis">
                  <p class="companyname">{{ item.comName }}</p>
                  <p class="synop">
                    {{ item.comNature }} | {{ item.comTrade }} |
                    {{ item.scale }}
                  </p>
                </div>
              </div>
              <div class="links" v-if="(item.couseList && item.couseList.length)||item.webName">
                <div class="dlex1-div">
                  <span class="greyBlue" v-if="item.couseList && item.couseList.length">
                    相关课程：</span
                  >
                  <span class="greyBlue">
                    <a
                      style="color: #0D4FAE;"
                      v-for="(iovm, index) in item.couseList"
                      :key="index + 'hg'"
                      @click="getJumpVideo(iovm)"
                      class="txta1"
                      >{{ iovm.name }}</a
                    >
                  </span>
                </div>
                <!-- 最右侧样式 -->
                <span
                  class="greyBlue lineSingle"
                  v-if="item.webName"
                  style="width: 295px"
                  >相关政策：<a
                    class="ams"
                    v-if="item.webUrl"
                    :href="item.webUrl"
                     target="_blank"
                    >{{ item.webName }}</a
                  >
                  <a v-else>{{ item.webName }}</a></span
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="cnBottom" v-if="nommpost.length > 1">
        <div style="margin: 0 auto; width: 230px">
          <a-button @click="more()" v-show="btnState == 1" class="sobtn"
            >点击加载更多</a-button
          >
          <a-button v-show="btnState == 2" loading="true" class="sobtn"
            >正在加载中</a-button
          >
          <span class="timeTxt1" v-if="btnState == 3">没有更多了</span>
        </div>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>
<script>
export default {
  data() {
    return {
      idName: this.$route.query.id,
      msgons: "",
      selnumber: null,
      btnState: 1,
      mosgolor: 1,
      selbuer: true,
      nommData: {},
      // 培训列表
      nommtrain: [],
      // 岗位列表
      nommpost: [],
      // 当前页码
      pageIndex: 1,
      onLoading:false
    };
  },
  methods: {
    // 登录弹框
    goLogin() {
      this.changeFlag();
      this.$refs["login"].tabIndex = 0;
      this.$refs["login"].tabType = 0;
      this.$refs["login"].visible = true;
    },
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push("/video/detailsVideo?courseNo=" + e.courseNo);
    },
    // 跳转函数
    getDatacompany(e) {
      //  直接调用$router.push 实现携带参数的跳转
      this.$router.push("/education/detailsBusiness?id=" + e);
    },
    onSearch(value) {
      return value;
      // console.log(value);
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.enterprise(this.pageIndex);
    },
    // 选中样式函数
    selColor(e) {
      this.selnumber = e;
    },
    selLopsss(e) {
      this.btnState = 2;
      this.pageIndex = 1;
      this.nommtrain = [];
      this.nommpost = [];

      if (e != 2) {
        // 在招岗位
        this.selbuer = true;

        this.selBypost(this.idName);
      } else {
        // 职业培训
        this.selbuer = false;

        this.selBytrain(this.idName);
      }
    },
    // 查询公司详情
    selById(e) {
      // console.log(this.city);
      this.$ajax({
        url: "/entrepreneurial/cominfo/get",
        method: "post",
        params: {
          comCode: e, //唯一值
        },
      }).then((res) => {
        if (res.code == "200") {
          this.onLoading = false
          if(res.data != null){
            this.nommData = res.data;
          }
        } else {
          this.onLoading = false
          this.nommData = "";
        }
      });
    },
    //
    // 查询公司下的职业培训详情
    selBytrain(e) {
      this.onLoading = true
      let ber = [];
      // console.log(this.city);
      this.$ajax({
        url:
          "/educational/traininginfo/cominfo/training/list?pageSize=10" +
          "&pageIndex=" +
          this.pageIndex,
        // method: "post",
        params: {
          comCode: e, //唯一值
        },
      }).then((res) => {
        if (res.code == "200") {
          this.onLoading = false
          ber = res.data.list;
          for (var i in ber) {
            this.nommpost.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.onLoading = false
          this.nommpost = "";
        }
      });
    },
    // 跳转培训详情页
    getJumptrainDetails(e) {
      // 查询详情的接口是公用的，所以传id里面显示内容不一样传type，2都是企业培训，3都是职业培训
      this.$router.push("/education/trainDetails?id=" + e + "&type=" + 3);
    },
    // 查询公司下的岗位详情
    selBypost(e) {
      let ber = [];
      this.$ajax({
        url:
          "/entrepreneurial/comjob/cominfo/joblist?pageSize=10" +
          "&pageIndex=" +
          this.pageIndex +
          "&comCode=" +
          e,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == "200") {
          ber = res.data.list;
          for (var i in ber) {
            this.nommtrain.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.nommtrain = "";
        }
      });
    },
  },
  mounted() {
    this.selById(this.idName);
    this.selBytrain(this.idName);
    this.selBypost(this.idName);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.selcolore {
  width: 128px;
  color: #666666;
  cursor: pointer;
}
.lopsss {
  font-weight: 600;
}
.timeTxt1 {
  text-align: center;
}
//
.lineSingle {
  width: 300px;
  margin-top: 32px;
}
//  自己写
.top {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  background-color: #ffffff;
  padding: 25px 20px;
  .image123 {
    width: 100px;
    height: 100px;
    margin-right: 24px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .toRight {
    margin-left: 131px;
    .image2 {
      width: 175px;
      height: 115px;
      margin-top: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// 中间部分样式
.conder {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  padding-bottom: 30px;
  .listDiv {
    width: 590px;
    height: 190px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    padding: 20px 12px;
    float: left;
    margin-left: 20px;
    margin-bottom: 24px;
    display: flex;
    cursor: pointer;
    .image1 {
      flex-shrink: 0;
      width: 217px;
      height: 150px;
      margin-right: 20px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .listDiv:nth-child(2n-1) {
    margin-left: 0px;
  }
  .txta1 {
    display: block;
    padding-top: 8px;
    overflow: hidden;
    width: 183px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.cnBottom {
  width: 100%;
  margin-top: 60px;
  padding-bottom: 70px;
}
// 来自就业主页的样式
.workList {
  width: 100%;
  display: block;
  li {
    background-color: #ffffff;
    padding: 30px 20px 15px;
    display: block;
    margin: 0 auto;
    margin-bottom: 16px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
    .workTitle {
      color: #333333;
      font-size: 18px;
      line-height: 25px;
      font-weight: bold;
      cursor: pointer;
    }
    .msg {
      margin-top: 16px;
      display: flex;
      align-items: center;
      .welfare {
        cursor: pointer;
        overflow: hidden;
        margin-right: 89px;
        .navs {
          height: 25px;
          display: flex;
          align-items: center;
          .maney {
            color: #fb6d00;
            font-size: 18px;
            line-height: 25px;
          }
          .nav {
            display: flex;
            margin-left: 24px;
            p {
              color: #666666;
              font-size: 12px;
              line-height: 17px;
            }
            .line {
              margin: 0 20px;
            }
          }
        }
        .treatment {
          display: flex;
          margin-top: 16px;
          p {
            padding: 0 15px;
            color: #ffbe36;
            font-size: 12px;
            line-height: 22px;
            text-align: center;
            // background: #FFE9D9;
            border-radius: 4px;
            border: 1px solid #ffbe37;
            margin-right: 16px;
            // cursor: pointer;
          }
        }
      }
      .company {
        display: flex;
        cursor: pointer;
        .worklogo {
          width: 60px;
          height: 50px;
        }
        .synopsis {
          margin-left: 19px;
          padding-top: 3px;
          .companyname {
            color: #000000;
            font-size: 13px;
            line-height: 18px;
          }
          .synop {
            margin-top: 10px;
            color: #999999;
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
    }
    .links {
      // display: flex;
      width: 400px;
      height: 70px;
      border-left: #eeeeee 1px solid;
      margin-left: 25px;
      padding-left: 40px;
      span{
        font-size: 14px;
      }
      a{
        font-size: 14px;
      }
      p {
        margin-right: 40px;
        color: #333333;
        font-size: 14px;
        line-height: 17px;
        span {
          display: inline-block;
          margin-left: 8px;
          color: #0d4fae;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
